<template>
	<view>
		<view class="status_bar01"></view>
		<view class="head">
			<view class="left-select" @tap="setCancel" ><lable class="iconfont" style="font-size: 40rpx;" v-if="!cancel">&#xe606;</lable>{{cancelText}}</view>
			<view class="title">
				<text>购物车</text>
			</view>
		</view>		
		
		
		<view class="clear_box01"></view>		
		<block v-for="(item, index) in goods" :key="index">
		  <view class="content_box" >
		    <view class="tick_box" :data-index="index" @tap="autoTick(index)">
		      <view class="tick iconfont" :class="item.check==1?  'tickcolor' : ''" >&#xe61f;</view>
		    </view>
		    <view class="goods_box">
		      <image class="good_img" :src="item.image" mode="scaleToFill" :data-url="'/pages/goods/goods?id=' + item.goods_id" @click.stop="gotopage" > </image>
				<view class="title">{{item.name}}</view>
				<view class="icon iconfont" v-show="cancel" @tap="delNumber(item.cart_id)">&#xe657;</view>
				<view class="num_box">
				  <view class="symbol iconfont"  :data-index="index" @tap="subNumber(index)">&#xe8b1;</view>
				  <view class="num">{{item.quantity}}</view>
				  <view class="symbol iconfont"  :data-index="index" @tap="addNumber(index)">&#xe74a;</view>
				</view>
				<view  class="txt_g" >规格：{{ item.sku_dkr || '默认' }}</view>
				<view class="money">￥{{ item.price }}</view>

		    </view>
		  </view>
		</block>
		
		<view class="no_goods" v-if="goods.length <= 0">
			<image src="../../static/bg08.png" mode="widthFix"></image>
		</view>
		<view class="clear_box09"></view>
		<view class="footer">
		  <view class="money_box">
		    <view class="tick_box" @tap="autoTotalTick">
		      <view class="tick iconfont" :class="totaltick ? 'tickcolor' : ''">&#xe61f;</view>
		      <view class="text">全选</view>
		    </view>
		    <view class="total_box" style="padding-left: 3vw;">
				<span class="total_auto"><view class="text">合计：</view>
			<view class="money">￥{{totalmoney }}</view></span>
		  <!--  <span class="total_auto"><view class="text">znz合计：</view>
		    <view class="money">{{zk }}</view></span> -->
			
		    </view>

		  </view>
		  <view class="menu" data-url="/pages/car/details1?ck=1" @click="gotopage1">结算</view>
		</view>
		

		
	</view>
</template>

<script>
export default {
	data() {
		
		return {
			cancel:false,
			cancelText:'管理',
			goods: [
			 
			
			    ],
			    totaltick:false,
			    totalmoney: 0,
				goods02: [
						
					
				],
			f:0,
			zk:0
			
		};
	},
	onShow(){
		let me = this;

		me.loadData();
	},
	methods: {
		onPullDownRefresh() {
				let me = this; // 下拉监听事件
				console.log('refresh');
				setTimeout(function() {
						uni.stopPullDownRefresh();
		me.loadData();
				}, 500);
			},
	loadData(){
				let me = this;
				me.Net._get('cartList',{},(res)=>{
					me.goods=res.data.list.list
					me.totalmoney=res.data.list.total
					me.zk=res.data.list.price_zk
					me.f=res.data.f
					console.log(res.data)
				}); 
				},
		autoTick:function(i){
		  var this_ = this;
		  var good=this_.goods[i]
		  var check=0;
		  if(good.check==1)check=0
		  if(good.check!=1)check=1
		    console.log(check)
		  this_.Net._get('upCart',{id:good.goods_id,sku:good.sku_dkr,buys:good.quantity,check:check,all:false},(res)=>{
		  if(res.data.success){
		  		this_.loadData();
		  }
		  else
		  {
		  	this_.Msg.Fail(res.data.msg)	
		  }
		  	
		  }); 
		},
		subNumber: function(i) {
			var this_ = this;
			var good=this_.goods[i]
			if(good.quantity<=1)
			{
				this_.Msg.Fail('已经最小了')	
					return}
			good.quantity=good.quantity-1
			this_.Net._get('upCart',{id:good.goods_id,sku:good.sku_dkr,buys:good.quantity,check:good.check,all:false},(res)=>{
			if(res.data.success){
					this_.loadData();
			}
			else
			{
				this_.Msg.Fail(res.data.msg)	
			}
				
			}); 
		
		},
		delNumber: function(id) {
			console.log(id)
			var this_ = this;
			this_.Net._get('delCart',{id:id},(res)=>{
		
				if(res.data.success){
						this_.loadData();
				}
				else
				{
					this_.Msg.Fail(res.data.msg)	
				}
			}); 
		},
		addNumber: function(i) {
			var this_ = this;
			var good=this_.goods[i]
			var check=0;
			good.quantity=good.quantity+1
			this_.Net._get('upCart',{id:good.goods_id,sku:good.sku_dkr,buys:good.quantity,check:good.check,all:false},(res)=>{
		
				if(res.data.success){
						this_.loadData();
				}
				else
				{
					this_.Msg.Fail(res.data.msg)	
				}
			}); 
		},
		
		autoTotalTick:function(){
		    var this_ = this;
		    let goods = this_.goods;
		    var moneys = 0;
		
			
		   		
			this_.totaltick = !this_.totaltick
			
			  
			   		 
		    if (this_.totaltick == true){
				goods.forEach(item => {
				 
			      moneys += item.price * item.quantity
				  this_.Net._get('upCart',{id:item.goods_id,sku:item.sku_dkr,buys:item.quantity,check:1,all:true},(res)=>{
				  	if(res.data.success){
				  		 item.check = 1;
						
				  	}
				  	else
				  	{
				  		this_.Msg.Fail(res.data.msg)	
				  	}
				  }); 
				})
				
		   //    goods.forEach(item => {
		   //      item.check = 1;
		   //      moneys += item.price * item.quantity
		   //    })
		      		     
			   this_.totalmoney = moneys;
		
		    } else if (this_.totaltick == false){
				goods.forEach(item => {
				 
						
				  this_.Net._get('upCart',{id:item.goods_id,sku:item.sku_dkr,buys:item.quantity,check:0,all:true},(res)=>{
				  	item.check = 0;
				  }); 
				})
		//       goods.forEach(item => {
		//         item.check = 0;
		//         moneys = 0;
		//       })
		
		       this_.totalmoney = 0;
	
		    }
				
		  },
		  gotopage(e){
		  	let url = e.currentTarget.dataset.url;
		  	uni.navigateTo({
		  		url:url
		  	})
		  },
		  gotopage1(e){
			  var me =this
			  let url = e.currentTarget.dataset.url;
			  me.Net._get('cartListc',{},(res)=>{
				  console.log(res)
				  if(res.data.length==0)
				  {
				  				  	me.Msg.Fail('请选择商品')	
				  					return
				  }
				  else
				  {
					  uni.navigateTo({
		  		url:url
		  	})
				  }
			  
			  }); 
			 
		  	
		  	
		  },
		  setCancel(){
			  this.cancel = !this.cancel;
			  if(this.cancel == false){
				  this.cancelText = '管理'
			  }else if(this.cancel == true){
				  this.cancelText = '返回'
			  }
		  }
		
	}
};
</script>

<style>
	page{
		height: 100%;
	}
	.head {
		width: 100%;
		position: fixed;
		top:0;
		z-index: 11;
		padding-top: calc(var(--status-bar-height) + 10rpx);
		padding-bottom: 10upx;
		background-color: #4d726f;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.head .title {
		color: #fff;
		text-align: center;
		flex: 1;
		height: 12vw;
		line-height: 12vw;
		font-size: 36upx;
		padding-right: 150rpx;
	}
	.left-select{
		width: 150rpx;
		padding-left:40upx;
		 color: #FFFFFF;
		 font-size: 30upx;
		 font-weight: 400;
		 display: flex;
		 align-items: flex-end;
	}
	.clear_box01{
		margin-top: 30upx;
		display: inline-block;
	}
	.content_box {
		width: 94%;
		margin: 0 auto;
		margin-top: 5%;
		background: #fff;
		display: flex;
		padding: 15px 5px;
		border-radius: 10px;
	}
	
	.content_box .tick_box {
		width: 40px;
		height: 90px;
		position: relative;
	}
	
	.content_box .tick_box .tick {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		border: 1px solid #999;
		font-size: 16px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		color: #fff;
	}
	
	.content_box .goods_box {
		width: calc(100% - 20px);
		height: 206upx;
		position: relative;
	}
	
	.content_box .goods_box .good_img {
		width: 206upx;
		height: 206upx;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 6px;
	}
	
	.content_box .goods_box .title {
		width: calc(100% - 160px);
		font-size: 26upx;
		font-weight: bold;
		color: #333;
		position: absolute;
		left: 232upx;
		top: 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.content_box .goods_box .icon {
		width: 30px;
		font-size: 20px;
		color: #666;
		position: absolute;
		right: 0;
		top: 0;
		text-align: center;
		height: 30px;
	}
	
	.content_box .goods_box .num_box {
		position: absolute;
		right: 10px;
		bottom: 0;
		width: 80px;
		height: 30px;
		display: flex;
		z-index: 10;
	}
	
	.content_box .goods_box .num_box .symbol {
		width: 35px;
		height: 30px;
		line-height: 30px;
		font-size: 40rpx;
		color:#999999;
		text-align: center;
	}
	
	.content_box .goods_box .num_box .symbol:nth-child(1) {
		
	}
	
	.content_box .goods_box .num_box .symbol:nth-child(3) {
		
	}
	
	.content_box .goods_box .num_box .num {
		width: calc(100% - 46px);
		height: 30px;
		line-height: 30px;
		font-size: 3.5vw;
		color: 333;
		text-align: center;
	}
	
	.content_box .goods_box .txt_g {
		width: calc(100% - 200px);
		height: 30px;
		font-size:28rpx;
		line-height: 30px;
		color: #b0b0b0;
		position: absolute;
		left: 230upx;
		bottom: 33px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.content_box .goods_box .money {
		width: calc(100% - 200px);
		height: 30px;
		font-size:34rpx;
		font-weight: bold;
		line-height: 30px;
		color: #fe4816;
		position: absolute;
		left: 230upx;
		bottom: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.content_box .goods_box .norms {
		width: calc(100% - 200px);
		height: 30px;
		font-size: 12px;
		line-height: 30px;
		color: #999;
		position: absolute;
		left: 100px;
		bottom: 33px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.tickcolor {
		background-color: #4d726f !important;
		border: none !important;
	}
	/* #ifdef H5 */
	.footer {
		width: 100%;
		height: 60px;
		background: #fafafa;
		position: fixed;
		bottom: 13.3vw;
		display: flex;
		z-index: 999;
	}
	/* #endif */
	
	/* #ifdef APP-PLUS */
	.footer {
	 width: 100%;
	 height: 60px;
	 background: #fff;
	 position: fixed;
	 bottom: 0vw;
	 display: flex;
	 z-index: 999;
	}
	/* #endif */
	
	/* #ifdef MP-WEIXIN */
	.footer {
	 width: 100%;
	 height: 60px;
	 background: #fff;
	 position: fixed;
	 bottom: 0vw;
	 display: flex;
	 z-index: 999;
	}
	/* #endif */
	
	.footer .menu {
		width: 110px;
		height:42px;
		line-height: 42px;
		margin-top: 9px;
		background: #4d726f;
		font-size: 4vw;
		color: #fff;
		border-radius: 20px;
		margin-right:20upx;
		text-align: center;
	}
	
	.footer .money_box {
		width: calc(100% - 120px);
		height: 60px;
		position: relative;
	}
	
	.footer .money_box .tick_box {
		width: 77px;
		height: 60px;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
	}
	
	.footer .money_box .tick_box .tick {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		border: 1px solid #999;
		font-size: 14px;
		line-height: 18px;
		text-align: center;
		/* position: absolute;
		  left: calc(50% - 9px);
		  top: calc(50% - 9px); */
		color: #fff;
		box-sizing: border-box;
		margin-top: 21px;
		margin-right: 10px;
	}
	
	.footer .money_box .tick_box .text {
		font-size: 14px;
		line-height: 60px;
		text-align: center;
		color: #666;
	}
	
	.footer .money_box .total_box {
		width: calc(100% - 77px);
		height: 60px;
		position: absolute;
		right: 10px;
		top: 0;
		display: flex;
		align-items: center;
	}
	
	.footer .money_box .total_auto{
		display: flex;
		justify-content: flex-end;
	}
	
	.footer .money_box .total_box .text {
		width: 78px;
		font-size: 14px;
		text-align: right;
		color: #666;
	}
	
	.footer .money_box .total_box .money {
		width: calc(100% - 50px);
		font-size: 15px;
		font-weight: bold;

		text-align: center;
		color: #fe4816;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: left;
	}
	
	.goods_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
	}
	
	.goods_box::after {
		flex: auto;
		content: '';
	}
	
	.goods_box .goods {
		width: 45%;
		flex-basis: auto;
		margin-bottom: 3%;
		margin-left: 3%;
		border-radius: 4px;
		background-color: #fff;
	
		position: relative;
		box-shadow: 0px 4px 4.65px 0.35px rgba(51, 51, 51, 0.09);
		padding-bottom: 40px;
	}
	.goods_box .goods .title {
		font-size: 17px;
		color: #232426;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		padding: 0 5px;
		line-height: 20px;
		font-weight: bold;
		margin-top: 10px;
	}
	
	.goods_box .goods .title02 {
		font-size: 10px;
		color: #232426;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		padding: 0 5px;
		line-height: 20px;
	}
	
	.goods_box .goods .state_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
		margin-top: 10px;
	}
	
	.goods_box .goods .state_box::after {
		flex: auto;
		content: '';
	}
	
	.goods_box .goods .state_box .state {
		flex-basis: auto;
		margin-bottom: 3%;
		margin-left: 3%;
		border-radius: 4px;
		background-color: #fff4ee;
		font-size: 8px;
		color: #fd4916;
		padding: 5px;
	}
	
	.goods_box .goods .money_box {
		width: 100%;
		height: 40px;
		display: flex;
		position: absolute;
		bottom: 0;
	}
	
	.goods_box .goods .car_menu {
		width: 22px;
		height: 22px;
		border-radius: 50%;
		text-align: center;
		line-height: 22px;
		background-color: #ffdb4e;
		font-size: 12px;
		color: #333;
		position: absolute;
		right: 10px;
		top: 9px;
	}
	
	.goods_box .goods .money_box .money {
		width: 50%;
		display: flex;
		line-height: 40px;
		color: #fe4816;
		font-size: 14px;
		margin-left: 3%;
	}
	
	.goods_box .goods .money_box .money .m {
		font-size: 10px;
		margin-top: 0px;
		margin-right: 5px;
	}
	
	.goods_box .goods .money_box .num {
		width: 50%;
		display: flex;
		line-height: 40px;
		color: #999;
		font-size: 10px;
		text-align: right;
	}
	
	.no_goods{
		width: 100%;
		height: 100%;
		margin-top: 10vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.no_goods image{
		width: 50%;
	}



</style>
